<template>
  <div>
    <div class="flex justify-between text-xs text-gray-500 mb-1">
      <span>{{ name }}</span>
      <span>{{ value }}</span>
    </div>
    <div class="relative h-2 bg-gray-200 rounded-full overflow-hidden">
      <div class="absolute top-0 left-0 h-full"
           :class="`bg-${color}-500`"
           :style="{ width: valuePercent }"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  name: { type: String, required: true },
  value: { type: String, required: true },
  valuePercent: { type: String, required: true },
  color: { type: String, default: 'blue' },
});
</script>